import React from 'react'
import "../../scss/jjt/History.scss"
import { SettingO,Ellipsis    } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Toast,NavBar  } from 'react-vant';
import { Typography } from 'react-vant';
import { useState } from 'react';
import { ShareSheet } from 'react-vant'
import IconFont from "../publics/JjtIcon";
//我的收藏
export default function MyCollection() {
    let navigate = useNavigate();
    const options = [
        [
          { name: '微信', icon: <IconFont type={"icon-weixin"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },
          { name: '朋友圈', icon: <IconFont type={"icon-pengyouquan"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont>},
          { name: '微博', icon: <IconFont type={"icon-QQ"} style={{fontSize:"55px",marginLeft:"10px"}}></IconFont> },
          { name: 'QQ', icon: <IconFont type={"icon-qqkongjian"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont>},
        ],
        [
          { name: '预约看房', icon: <IconFont type={"icon-yuyue"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },
          { name: '删除', icon: <IconFont type={"icon-shanchu2"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },

        ],
      ]
    const [visible, setVisible] = useState(false)
    const content =
  'React Vant 是一套轻量、可靠的移动端 React 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用，使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。'
  return (
    <div className='jjthistory'>
        <div className='jjthistorytop'>
            <NavBar
            title="浏览历史"
            
            // leftText="返回"
            rightText={<SettingO/>}
            onClickLeft={() => {navigate("/myapp")}}
            onClickRight={() => Toast('按钮')}
            />
        </div>
        <div className='jjthistorybottom'>
            <div className='jjthistorybottomcon'>
                <div className='jjthistorybottomcon1'>
                    <img src={require("../../staticfile/userimg.jpg")} alt="" />
                </div>
                <div className='jjthistorybottomcon2'>
                    <div className='jjthistorybottomcon2p1'>
                        <Typography.Text ellipsis className='jjthistorybottomcon2p1con'>{content}</Typography.Text>
                    </div>
                    <p className='jjthistorybottomcon2p2'>
                        <span>2室·福港园大厦·福田中心</span>
                    </p>
                    <p className='jjthistorybottomcon2p3'>
                        <span>10000元/月</span>
                    </p>
                    <p className='jjthistorybottomcon2p4'>
                        <span>2099年12月55号更新</span>
                    </p>
                    <Ellipsis className='jjthistorybottomcon2Ellipsis' onClick={()=>{setVisible(true)}}></Ellipsis>
                </div>
            </div>
            <div className='jjthistorybottomcon'>
                <div className='jjthistorybottomcon1'>
                    <img src={require("../../staticfile/userimg.jpg")} alt="" />
                </div>
                <div className='jjthistorybottomcon2'>
                    <div className='jjthistorybottomcon2p1'>
                        <Typography.Text ellipsis className='jjthistorybottomcon2p1con'>{content}</Typography.Text>
                    </div>
                    <p className='jjthistorybottomcon2p2'>
                        <span>2室·福港园大厦·福田中心</span>
                    </p>
                    <p className='jjthistorybottomcon2p3'>
                        <span>10000元/月</span>
                    </p>
                    <p className='jjthistorybottomcon2p4'>
                        <span>2099年12月55号更新</span>
                    </p>
                    <Ellipsis className='jjthistorybottomcon2Ellipsis'></Ellipsis>
                </div>
            </div>
        </div>
        <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log('option', option)
          console.log('index', index)
          setVisible(false)
        }}
      />
    </div>
  )
}
